<section *ngIf="showForm">
  <div nz-row>
    <div nz-col nzSpan="8">
      <button nz-button nzType="primary" (click)="readIdCard()" style="margin-bottom: 10px;margin-left: 150px;">读取身份证</button>
      <button nz-button nzType="primary" (click)="takePhoto()">拍照</button>
    </div>
  </div>
    <div class="clearfix" nz-row>
      <!-- <h3 class="title" style="padding-bottom: 5px;margin-left: 8%;display: inline-block;vertical-align: top;">照片:</h3> -->
      <nz-form-item style="margin-bottom: 0;" nz-col nzSpan="8">
        <nz-form-label [nzSpan]="9" style="width: 150px;" nzFor="email">照片</nz-form-label>
        <nz-form-control [nzSpan]="9">
          <nz-upload
          class="avatar-uploader"
          nzName="avatar"
          nzListType="picture-card"
          [nzShowUploadList]="false"
          (nzChange)="handleChange($event)"
        >
          <ng-container *ngIf="!show">
            <i class="upload-icon" nz-icon nzType="plus"></i>
            <div class="ant-upload-text">Upload</div>
          </ng-container>
          <img *ngIf="show" [src]="avatarUrl" style="width: 100%;height:102px;object-fit: cover;" />
        </nz-upload>              
             
        </nz-form-control>
      </nz-form-item >
      
      <!-- <div style="display: inline-block;width:150px;height:150px;border: 1px dashed #ddd;margin-left: 13px;background: #fafafa;">
          <img [src]="src" alt="" *ngIf="show" style="width:100%;height: 100%;object-fit: cover;">
      </div> -->
     
      <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible = false">
        <ng-template #modalContent>
          <img [src]="previewImage" [ngStyle]="{ width: '100%' }" />
        </ng-template>
      </nz-modal>
    </div>
    <form nz-form  [formGroup]="validateForm" (ngSubmit)="submitForm(validateForm.value)">
      <div nz-row [nzGutter] = '24'>
        <div nz-col [nzSpan] = '8'>
          <nz-form-item>
            <nz-form-label [nzSpan]="8" nzRequired>居住类别</nz-form-label>
            <nz-form-control [nzSpan]="16" nzErrorTip="请选择居住类别!">
              <nz-select nzShowSearch nzAllowClear nzPlaceHolder="" formControlName="infoPeopleType">
                <nz-option nzLabel="" nzValue=""></nz-option>
                <nz-option nzLabel="业主" nzValue="1"></nz-option>
                <nz-option nzLabel="房东" nzValue="2"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row [nzGutter] = '24'>
        <div nz-col [nzSpan] = '8'>
          <nz-form-item>
            <nz-form-label [nzSpan]="8" nzRequired>姓名</nz-form-label>
            <nz-form-control [nzSpan]="16" nzErrorTip="请输入姓名!">
              <input nz-input  placeholder="" formControlName="infoName"/>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan] = '8'>
          <nz-form-item>
            <nz-form-label [nzSpan]="8" nzRequired>性别</nz-form-label>
            <nz-form-control [nzSpan]="16" nzErrorTip="请选择性别!">
              <nz-select nzShowSearch nzAllowClear nzPlaceHolder="" formControlName="infoSex">
                <nz-option nzLabel="" nzValue=""></nz-option>
                <nz-option nzLabel="男" nzValue="1"></nz-option>
                <nz-option nzLabel="女" nzValue="0"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan] = '8'>
          <nz-form-item>
            <nz-form-label [nzSpan]="8" nzRequired>身份证号</nz-form-label>
            <nz-form-control [nzSpan]="16" nzErrorTip="请输入">
              <input nz-input  placeholder="" formControlName="idCardNo"/>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row [nzGutter] = '24'>
        <div nz-col [nzSpan] = '8'>
          <nz-form-item>
            <nz-form-label [nzSpan]="8" nzRequired>出生日期</nz-form-label>
            <nz-form-control [nzSpan]="16" nzErrorTip="请输入!">
              <nz-date-picker formControlName="infoBirthday"></nz-date-picker>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan] = '8'>
          <nz-form-item>
            <nz-form-label [nzSpan]="8" nzRequired>民族</nz-form-label>
            <nz-form-control [nzSpan]="16" nzErrorTip="请输入!">
              <input nz-input  placeholder="" formControlName="infoNationName"/>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan] = '8'>
          <nz-form-item>
            <nz-form-label [nzSpan]="8" nzRequired>户籍地址</nz-form-label>
            <nz-form-control [nzSpan]="16" nzErrorTip="请输入">
              <input nz-input  placeholder="" formControlName="papersAddress"/>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row [nzGutter] = '24'>
        <div nz-col [nzSpan] = '8'>
          <nz-form-item>
            <nz-form-label [nzSpan]="8" nzRequired>发证机关</nz-form-label>
            <nz-form-control [nzSpan]="16" nzErrorTip="请输入!">
              <input nz-input  placeholder="" formControlName="papersAuthority"/>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan] = '8'>
          <nz-form-item>
            <nz-form-label [nzSpan]="8" nzRequired>身份证有效起期</nz-form-label>
            <nz-form-control [nzSpan]="16" nzErrorTip="请输入!">
              <nz-date-picker formControlName="papersValidBegin"></nz-date-picker>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan] = '8'>
          <nz-form-item>
            <nz-form-label [nzSpan]="8" nzRequired>身份证到期</nz-form-label>
            <nz-form-control [nzSpan]="16" nzErrorTip="请输入">
              <nz-date-picker formControlName="papersValidStop"></nz-date-picker>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row [nzGutter] = '24'>
        <div nz-col [nzSpan] = '8'>
          <nz-form-item>
            <nz-form-label [nzSpan]="8" nzRequired>手机号</nz-form-label>
            <nz-form-control [nzSpan]="16" nzErrorTip="请输入!">
              <input nz-input  placeholder="" formControlName="infoMobile"/>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan] = '9'>
          <nz-form-item>
            <nz-form-label [nzSpan]="7">门禁卡</nz-form-label>
            <nz-form-control [nzSpan]="12">
              <input nz-input  placeholder="" [ngModel]="cardNo"  formControlName="cardNo" (blur)="iptBlur()"/>
            </nz-form-control>
            <nz-form-control [nzSpan]="2" style="margin-left: 10px;">
              <a nz-button nzType="primary" (click)="read()" >读卡</a>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan] = '7'>
          <nz-form-item>
            <nz-form-label [nzSpan]="6">虚拟卡号</nz-form-label>
            <nz-form-control [nzSpan]="18" nzErrorTip="请输入!">
              <input nz-input  placeholder="" formControlName="xnCardNo"/>
            </nz-form-control>
          </nz-form-item>
        </div>
        
      </div>
      <div nz-row [nzGutter] = '24'>
        <div nz-col [nzSpan] = '8'>
          <nz-form-item>
            <nz-form-label [nzSpan]="8">卡编号</nz-form-label>
            <nz-form-control [nzSpan]="16" nzErrorTip="请输入!">
              <input nz-input  placeholder="" formControlName="cardCode"/>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan] = '16'>
          <nz-form-item>
            <nz-form-label [nzSpan]="4" nzRequired>管理楼栋</nz-form-label>
            <nz-form-control [nzSpan]="20" nzErrorTip="请选择!">
              <nz-spin [nzSize]="'small'" [nzSpinning]="isLoading">
                  <nz-tree-select
                  #treedom
                  id="tree"
                  [ngModelOptions]="{standalone: true}"
                  [nzNodes]="nodes"
                  [(ngModel)]="value"
                  (keyup)="onKey($event)"
                  [nzDropdownStyle]="{'max-height': '300px'}"
                  nzCheckable
                  nzPlaceHolder="请选择"
                  > </nz-tree-select>
                </nz-spin>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <nz-form-item style="text-align: center;">
        <nz-form-control [nzOffset]="7" [nzSpan]="12">
          <button nz-button nzType="primary">提交</button>
          <button nz-button (click)="resetForm($event)">重置</button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </section>

